<template>
<div class="project">
    <div class="projectTop">
        <div class="box80">
            <div class="wid100" style="height:60px;padding-top:15px;">
                <div class="font20">{{currentProject.itemName}}</div>
                <div class="font24"><span style="cursor:pointer" @click="showPDFView()"><img src="/cslaic/img/EXCEL.15984089.png" alt="">导出</span></div>
            </div>
        </div>
    </div>
    <div class="box80">
        <el-button
    type="primary"
    @click="openFullScreen1"
    v-loading.fullscreen.lock="fullscreenLoading" style="display:none">
  </el-button>
<div class="conformBrand">
    <div class="tp">
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="灯参编号:">
                <el-input v-model="request.lampparamNo"></el-input>
            </el-form-item>
            <el-form-item label="灯具类型:">
                <el-select v-model="request.lampTypeId">
                    <el-option label="全部" value=""></el-option>
                <el-option
                    v-for="item in lampTypeList"
                    :key="item.id"
                    :label="item.lampName"
                    :value="item.id"
                ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="功率(W)" class="power power1">
                <el-input  v-model="request.lampPowerMin"></el-input>
                <span class="xian">-</span>
                <el-input v-model="request.lampPowerMax"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button  type="primary" @click="search(1)">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="bp">
        <div class="cont">
            <label>
                <input v-model="cankao1" type="checkbox">参照数据
            </label>
            <label>
                <input v-model="cankao2" type="checkbox">符合品牌
            </label>
            <span v-show="false" @click="refresh()"><img src="@/assets/images/shuaxin.png" alt=""></span>
        </div>
        <el-table 
        ref="singleTable" 
        :data="tableData" 
        highlight-current-row border 
        style="width: 100%" 
        :max-height="lojh">
            <el-table-column type="index" label="序号"  width="50"></el-table-column>
            <el-table-column property="lampparamNo" label="灯具编号" width="100"></el-table-column>
            <el-table-column property="lampType" label="灯具类型" width="100"></el-table-column>
            <el-table-column  property="colorTemperatureFirst" label="色温(K)" width="100"></el-table-column>
            <el-table-column  property="lampPower" label="功率（W）" width="100"></el-table-column>
            <el-table-column  property="workVoltage" label="工作电压(V)" width="100"></el-table-column>
            <el-table-column  property="controlProtocol" label="控制"></el-table-column>
            <el-table-column  label="参照数据" min-width="530" v-if="cankao1">
                <template slot-scope="scope">
                    <div v-for="item in scope.row.refDetectionData" style="text-align:left">{{item.brandName}}:编号-{{item.posCode}}、样品型号:{{item.lumModel}}</div>
                </template>
            </el-table-column>
            <el-table-column  property="cik" label="符合品牌" min-width="520" v-if="cankao2">
                 <template slot-scope="scope">
                     <div class="pol" style="text-align:left">
                    <div v-for="(item,index) in scope.row.recommendLamps" v-if="index<5">{{item.brandName}}:编号-{{item.posCode}}、样品型号:{{item.lumModel}}</div>
                    <div v-if="scope.row.recommendLamps!=null && scope.row.recommendLamps.length > 5" class="de">点击编辑查看更多数据</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="showDetail(scope.row)"
                    type="text"
                    size="small">
                   编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
         <div class="add sdsdeee">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
            
        </div>
    </div>
    <el-dialog
    title="符合品牌"
    :visible.sync="isShowPdf"
    custom-class="addRole pop-up jigou"
    v-dialogDrag>
        备注信息：<el-input v-model="pdfdetail" type="textarea" :rows="5"></el-input>
        <br>
       <div style="text-align:center;padding-top:10px"> <el-button @click="saveDetail()" type="primary">导出</el-button></div>
    </el-dialog>
     <!-- 符合品牌 -->
    <el-dialog
    class="tableAddproduct "
    title="符合数据"
    custom-class="fuhepinpaiContH"
    :visible.sync="fuhepinpaiCont"
        v-dialogDrag>
        <div class="cur">灯参信息：
            <span>{{currentEditRow.lampparamNo}}</span>
            <span>{{currentEditRow.lampType}}</span>
            <span>{{currentEditRow.colorTemperatureFirst}}</span>
            <span>{{currentEditRow.workVoltage}}</span>
        </div>
        <el-form :inline="true">
             <el-form-item label="品牌:">
                <el-input v-model="searchBrandKey"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchKexuanList()" type="primary">查 询</el-button>
            </el-form-item>
        </el-form>
        <div class="cont">
            <div class="lt">
                <div class="top">可选数据列表</div>
                <el-table 
                ref="singleTable" 
                :data="kexuanList" 
                highlight-current-row
                border 
                style="width: 100%" 
                :max-height="tableHeight"
                >
                    <el-table-column type="index"  label="序号" width="50"></el-table-column>
                    <el-table-column property="name" label="数据信息">
                        <template slot-scope="scope">
                            <div>{{scope.row.brandName}}:编号-{{scope.row.posCode}}、样品型号:{{scope.row.lumModel}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="addRow(scope.row)"
                            type="text"
                            size="small">
                                添加
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="rt">
                <div class="top">已选数据列表</div>
                <el-table 
                    ref="singleTable" 
                    :data="currentEditRow.recommendLamps" 
                    highlight-current-row 
                    border 
                    style="width: 100%" 
                    :max-height="tableHeight"
                    >
                    <el-table-column type="index" label="序号"  width="50"></el-table-column>
                    <el-table-column property="name" label="数据信息">
                        <template slot-scope="scope">
                            <div >{{scope.row.brandName}}:编号-{{scope.row.posCode}}、样品型号:{{scope.row.lumModel}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="deleteRow(scope.row)"
                            type="text"
                            size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                   
                </el-table>
            </div>
        </div>
        <div class="tev" style="text-align:center;margin-top:20px;">
                 
                  <el-button  type="primary" @click.native.prevent="saveJson()">确定</el-button>  
                 
            </div>
    </el-dialog>
    </div>
</div>
</div>
</template>

<script>
import _ from 'lodash'
    export default{
        data(){
            return{
                fullscreenLoading: false,
                loading:false,
                searchBrandKey:'',
                currentProject:{},
                kexuanList:[],
                kexuanListBak:[],
                lampTypeList:[],
                request:{
                    lampPowerMax: '',
                    lampPowerMin: '',
                    // "colorTemperatureFirst": "string",
                    lampType: '',
                    lampparamNo: "",
                    // "lumModel": "string",
                    // "order": "asc,desc",
                    page: 1,
                    rows: 20,
                    // "senderCode": "string",
                    // "sort": "projectId,lampparamNo",
                    // "workVoltage": "string"
                },
                tableHeight:200,
                tableData:[],
                totalCount:0,
                fuhepinpaiCont:false,
                cankao1:false,
                cankao2:true,
                currentEditRow:{},
                currentPage:1,
                lojh:200,
                isShowPdf:false,
                pdfdetail:''
            }
        },
        methods: {
             openFullScreen1() {
                this.fullscreenLoading = true;
            },
            showPDFView(){
                var projectId = this.$route.query.id
                let self = this
                this.$http.get('/api/projectConfigures/xiaoguoshujumiaoshu/'+projectId,{},function(res){
                    if(res.success){
                        self.pdfdetail = res.data.paramValue
                        self.isShowPdf = true
                    }
                })
            },
            refreshOptions(){
                var temp = []
                for(var j = 0;j<this.currentEditRow.passLamps.length;j++){ //全部
                    var row = this.currentEditRow.passLamps[j];
                    var cunzai = _.find(this.currentEditRow.recommendLamps,function(o){return o.id == row.id})
                    if(cunzai == null || cunzai == undefined){
                        temp.push(row)
                    }
                }
                this.kexuanList = temp
                console.log(this.kexuanList)
                this.kexuanListBak = temp
            },
            searchKexuanList(){
                var temp = []
                var name = this.searchBrandKey
                if(name != ''){
                    for(var i = 0;i<this.kexuanListBak.length;i++){
                        if(this.kexuanListBak[i].brandName == name){
                            temp.push(this.kexuanListBak[i])
                        }
                    }
                }else{
                    temp = this.kexuanListBak
                }
                this.kexuanList = temp
            },
            showDetail(rows) {
               this.fuhepinpaiCont = true
               this.currentEditRow = rows
               this.refreshOptions()
            },
            addRow(rows){
                this.currentEditRow.recommendLamps.push(rows)
                this.refreshOptions()
            },
            deleteRow(rows){
                var temp = []
                for(var i = 0;i<this.currentEditRow.recommendLamps.length;i++){
                    if(this.currentEditRow.recommendLamps[i].id != rows.id){
                        temp.push(this.currentEditRow.recommendLamps[i])
                    }
                }
                this.currentEditRow.recommendLamps = temp
                this.refreshOptions()
            },
            saveJson(){
                var id = this.currentEditRow.id
                let self = this
                //JSON.stringify(this.currentEditRow.recommendLamps)
                this.$http.putObj('/api/lampparams/lamps/edit/'+id,this.currentEditRow.recommendLamps,function(res){
                    if(res.success){
                        self.$message({
                            message: "操作成功！",
                            type: "success"
                        })
                        self.search(1)
                        self.fuhepinpaiCont = false
                    }
                })
            },
            handleCurrentChange(page) {
                this.search(page)
            },
            handleSizeChange(pageSize){
                this.request.rows = pageSize
                this.search(1)
            },
            search(page){
                var projectId = this.$route.query.id
                let self = this
                this.request.page = page
                this.$http.postObj('/api/lampparams/lamps/pageJson/'+projectId,this.request,function(res){
                    // var res= '{"success":true,"code":"0000","message":"成功","data":{"total":2,"rows":[{"recommendLamps":[{"brandName":"佰特","posCode":"18LTBT00-XD2803-05","id":5232,"supplierCode":"200086","lumModel":"XD-28-03/3000K/L1000"}],"passLamps":[{"brandName":"佰特","posCode":"18LTBT00-XD2803-05","id":5232,"supplierCode":"200086","lumModel":"XD-28-03/3000K/L1000"}],"refDetectionData":[{"brandName":"佰特啊啊啊啊啊啊啊啊啊啊啊啊啊啊","posCode":"18LTBT00-XD2803-05","id":5232,"supplierCode":"200086","lumModel":"XD-28-03/3000K/L1000"}],"workVoltage":"24V","controlProtocol":"","lampparamId":4879,"lampparamNo":"LHW4","senderCode":"200086","colorTemperatureFirst":"3000K","projectId":1475,"lampType":"线型投光灯","lampPower":39,"id":1452}]}}'
                    // var res = JSON.parse(res)
                    if(res.success){
                        self.tableData = res.data.rows
                        self.totalCount = res.data.total
                    }
                self.fullscreenLoading = false;
                })
            },
            refresh(){
                this.openFullScreen1()
                var projectId = this.$route.query.id
                let self = this
                this.$http.postObj('/api/lampparams/lamps/refreshJson/'+projectId,{},function(res){
                    if(res.success){
                        // self.$message({
                        //     message: "刷新成功！",
                        //     type: "success"
                        // })
                        self.search(1)
                    }
                })
            },
            downloadFile(url){
                window.open(url)
            },
            saveDetail(){
                let self = this
                var projectId = this.$route.query.id
                this.$http.putObj('/api/projectConfigures/xiaoguoshujumiaoshu',{xiaoguoDesc:self.pdfdetail,projectId:projectId},function(res){
                    if(res.success){
                        self.isShowPdf = false
                        self.excelPDF()
                    }
                })
            },
            excelPDF(){
                var projectId = this.$route.query.id
                let self = this
                this.$http.postObj('/api/lampparams/lamps/exportExcel/'+projectId,{},function(res){
                    if(res.success){
                        self.downloadFile(self.ImgPath + "/" + res.data.fileName)
                        //推送信息
                        self.sendMessage()
                    }
                })
            },
            sendMessage(){
                var projectId = this.$route.query.id
                this.$http.get('/api/lampparams/lamps/sendToSupplier/'+projectId,{},function(res){

                })
            }
        },
        created(){
            let self = this

            var projectId = this.$route.query.id
            this.$http.get("/api/projects/treeJson/"+projectId,{},function(res){
                if(res.success){
                    var data = res.data
                    self.currentProject = data[0]
                }
            })

            //加载灯具类型
            this.$http.get("/api/lampTypes/detectionJson", {}, function(res) {
                if (res.success) {
                    self.lampTypeList = res.data;
                }
            });
            // this.search(1)
            this.refresh();
        },
        mounted(){
              this.$nextTick(function () {
                   this.lojh = window.innerHeight - 360;
                    this.tableHeight = window.innerHeight/2
                   let self = this;
                    window.onresize = function() {
                        self.lojh = window.innerHeight - 360
                        self.tableHeight = window.innerHeight/2
                    }

               
              })
         }
    }
</script>
<style rel="stylesheet/scss" lang="scss" >
.projectTop{
    background: #5962a3;
    color: #fff;
    margin-bottom: 15px;
    .font20{
        float: left;
        font-size: 16px;
    }
    .font24{
        float: right;
        font-size: 17px;
        img{
            display: inline-block;
            margin-right: 6px;
            position: relative;
            top: 3px;
            height: 17px
        }
    }
}
.pol{
    text-align: left;
    .de{
        color: #2b7abb
    }
}
.project {
    padding-top: 88px;
    .conformBrand{
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
    }
    .power{
        .el-input input{
            padding: 0 3px;
        }
        
    } 
    .el-button--primary {
        background-color: #5962a3;
        border-radius: 3px;
        border: none;
    }
    .bp{
        text-align: right;
        margin-bottom: 20px;
        .cont{
             margin-bottom: 10px;
             label{
                 margin-right: 12px;
                 input{
                    position: relative;
                    top: 2px;
                    margin-right: 2px;
                 }
             }
             span{
                 cursor: pointer;
                 color: #5962a3
             }
             img{
                 display: inline-block;
                 height: 15px;
             }
        }
    }
    
    table{
        th,td{
            text-align: center
        }
        .cell{
            white-space: pre-line;
        }
        .el-button{
            color: #606266;
            &:hover{
                color: #5962a3
            }
        }
    }
}
.sdsdeee{
    text-align: center;
    margin-top: 10px;
}
.fuhepinpaiContH{
    .el-dialog__body{
        padding-top: 0;
    }
    .el-dialog__header{
        text-align: center;
        .el-dialog__title{
            font-weight: bold
        }
    }
    .el-form-item{
        margin-bottom: 10px;
    }
    .cur{
        margin-bottom: 15px;
    }
    .cur span{
        margin-left: 10px
    }
    .cont{
        width: 100%;
        overflow: hidden;
        .lt{
            width: 48%;
            float: left;
        }
        .rt{
            width: 48%;
            float: left;
            margin-left: 4%;
            .top{
                margin-bottom: 5px;
            }
        }
    }
}
</style>